<!-- 部门树 -->
<template>

  <el-input v-model="deptName" placeholder="门店名称" @change="changename" clearable>
    <template #prefix>
      <i-ep-search />
    </template>
  </el-input>

  <el-tree ref="deptTreeRef" class="mt-2 elTree" :data="deptList" highlight-current node-key="value"
    :current-node-key="currentNodeKey" :props="{ children: 'children', label: 'label', disabled: '' }"
    :expand-on-click-node="false" :filter-node-method="handleFilter" default-expand-all
    @node-contextmenu="contextmenuClick" @node-click="handleNodeClick">
    <template #default="{ node, data }">
      <span class="custom-tree-node">
        <span>{{
          node.label }}</span>
        <span class="treeSom"> ({{ data.online }} / {{ data.total }}) </span>
      </span>
    </template>
  </el-tree>
</template>
<!-- node-key="id"  :default-checked-keys="[contactId]" -->
<script setup lang="ts">
import CustomerAPI from "@/api/customer";
import StoreeApi from "@/api/store"

let props = defineProps({
  modelValue: {
    type: [String],
    default: "1"
  },
  currentNodeKey: {
    type: [String],
    default: "1"
  },
});

const deptList = ref<OptionType[]>([]); // 部门列表
const contactId = ref('')
const deptTreeRef = ref(ElTree); // 部门树
const deptName = ref(); // 部门名称

const emits = defineEmits(["node-click", "node-contextmenu", "update:modelValue"]);
const deptId = useVModel(props, "modelValue", emits);

watchEffect(
  () => {
    deptTreeRef.value.filter(deptName.value);
  },
  {
    flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
  }
);

/** 部门筛选 */
function changename() {

}
function handleFilter(value: string, data: any) {
  if (!value) {
    return true;
  }
  return data.customerName.indexOf(value) !== -1;
}


/** 部门树节点 Click */
function handleNodeClick(data: { [key: string]: any }) {
  deptId.value = data.value;
  emits("node-click", data);
}
/* 鼠标右键 */
function contextmenuClick(event: any, object: any, Node: any, element: any) {
  deptId.value = object.value;
  emits("node-contextmenu", event, object, Node);
}
function getCustomerTree() {
  StoreeApi.getOptions().then((data) => {
    deptList.value = []
    deptList.value.push(data)
    deptId.value = data.value;
    emits("node-click");
  });
}
//暴露方法
defineExpose({
  getCustomerTree
})
onBeforeMount(() => {
  getCustomerTree()
});
</script>
<style lang="scss" scoped>
.elTree {
  :deep(.el-card__body) {
    padding-top: 10px;
  }

  :deep(.el-tree-node__content:hover) {
    background-color: #40a0ff4e !important;
  }

  :deep(.el-tree-node.is-current > .el-tree-node__content) {
    background-color: #409eff !important;

    .el-tree-node__label {
      color: #fff;
    }
  }

  :deep(.el-tree-node:focus > .el-tree-node__content) {
    background-color: #409eff !important;


  }

  .client {
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;

    .list {
      display: flex;
      align-items: center;
    }
  }
}
</style>
